<template>
  <h1>个人简历练习</h1>
  <table border="1px">
    <tr><td>照片:</td><td><img :src="person.imgUrl" width="100"></td></tr>
    <tr><td>姓名:</td><td>{{person.name}}</td></tr>
    <tr><td>年龄:</td><td>{{person.age}}</td></tr>
    <tr><td>好友:</td>
      <td>
        <ul>
          <li v-for="fname in person.friends">{{fname}}</li>
        </ul>
      </td>
    </tr>
  </table>
  <button @click="load()">加载数据</button>
</template>

<script setup>
  import {ref} from "vue";

  const person = ref({name:'',age:'',imgUrl:'',friends:[]});
  const load = ()=>{
    //给person对象的所有属性赋值
    //图片fcq.jpg在public文件夹下
    person.value = {
      name:'范传奇',
      age:'20',
      imgUrl:'fcq.jpg',
      friends:['路飞','索隆','娜美']
    };
  }
</script>

<style scoped>

</style>